<template>
  <TreeSelect
    v-model:value="value"
    :tree-data="treeData"
    show-search
    allow-clear
    placeholder="请选择"
    :fieldNames="{ label: 'themeName', key: 'id', value: 'id' }"
    :tree-default-expand-all="true"
    :disabled="disabled"
  ></TreeSelect>
</template>
<script lang="ts" setup name="nTreeSelect">
import { ref, computed, onMounted } from 'vue';
import { TreeSelect } from 'ant-design-vue';
import {defHttp} from '/src/utils/http/axios';
import { useMessage } from "/src/hooks/web/useMessage";

const props = defineProps({
  placeholder: {
    type: String,
    default: '请选择'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  isRoot: {
    type: Boolean,
    default: true
  }
});

enum Api {
  treeUrl = '/travel/jhTheme/tree'
}

const value = defineModel('value');
const treeData = ref<any>([]);

onMounted(() => {
  fetchTreeData();
});

async function fetchTreeData() {
  // 这里可以调用接口获取树状结构数据
  let params = {};
  let records = await defHttp.get({url: Api.treeUrl, params});
  console.log("records==>",records);
  if (props.isRoot) {
    treeData.value = [{id: 0, themeName: '根节点', children: records}]
  }else{
    treeData.value = records
  }
}
</script>
<style lang="less" scoped></style>
